<template>

    <com-card>
      <div slot="com_title"  class="title_con">
         <div>商品分类</div>
         </div>
  
   <div slot="com_content">
        <el-table :data="dataSource" style="width: 100%">
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-form label-position="left" inline class="demo-table-expand">
                <el-form-item label="商品ID">
                  <span>{{ props.row.id }}</span>
                </el-form-item>
                <el-form-item label="商品名称">
                  <span>{{ props.row.name }}</span>
                </el-form-item>
                <el-form-item label="所属分类">
                  <span>{{ props.row.category }}</span>
                </el-form-item>
                <el-form-item label="商品价格">
                  <span>{{ props.row.price }}</span>
                </el-form-item>
                <el-form-item label="商品图片">
                  <span>{{ props.row.imgUrl }}</span>
                </el-form-item>
                <el-form-item label="创建时间">
                  <span>{{ props.row.ctime }}</span>
                </el-form-item>
                <el-form-item label="商品评价">
                  <span>{{ props.row.rating }}</span>
                </el-form-item>
                <el-form-item label="商品销量">
                  <span>{{ props.row.sellCount }}</span>
                </el-form-item>
                <el-form-item label="商品描述">
                  <span>{{ props.row.goodsDesc }}</span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column label="商品名称" prop="name"> </el-table-column>
          <el-table-column label="所属分类" prop="category"> </el-table-column>
          <el-table-column label="商品价格" prop="price"> </el-table-column>
          <el-table-column label="商品图片" prop="imgUrl">
            <template slot-scope="scope">
              <el-image
                style="width: 50px; height: 50px"
                :src="
                  'http://localhost:5000/upload/imgs/goods_img/' +
                  scope.row.imgUrl
                "
              ></el-image>
            </template>
          </el-table-column>
          <el-table-column label="商品描述" prop="goodsDesc"> </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button @click="updClick(scope.row)" type="warning" size="mini"
                >编辑</el-button
              >
              <el-button @click="delClick(scope.row)" type="danger" size="mini"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          ref="refpagination"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </com-card>

</template>

<script>
import ComCard from "../../components/comcard/index.vue"
import { api_goodslist, api_goodsdel } from "../../api/goods";
export default {
  data() {
    return {
      name: "",
      category: "",
      total: 0,
      dataSource: [],
      currentPage: 1,
      pageSize: 10,
    };
  },
  components: {
    ComCard,
  },
  methods: {
    //查询
    async query() {
      const { total, data } = await api_goodslist({
        currentPage: this.currentPage,
        pageSize: this.pageSize,
        name: this.name,
        category: this.category,
      });
      console.log(data);
      this.total = total;
      this.dataSource = data;
    },
    //删除
    async delClick(data) {
      const { msg, code } = await api_goodsdel({ id: data.id });
      if (code == 0) {
        this.$message.success(msg);
        this.query();
      } else {
        this.$message.error(msg);
      }
    },

    updClick(data) {},
    handleSizeChange(val) {
      this.pageSize = val;
      this.query();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.query();
    },
  },
  mounted() {
    this.query();
  },
};
</script>

<style lang="less" scoped>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>